<template>
	<div>
		<div class="header">
			<img class='header-img' :src='coffeeObj.absoluteurl' />
			
			<div class='header-desc'>
				<div>{{pageText.jqbh}}：{{coffeeObj.code}}</div>
				<div>{{pageText.jqmc}}：{{coffeeObj.name}}</div>
				<div>{{pageText.jqwz}}：{{coffeeObj.location}}</div>
			</div>
		</div>
		
		<view class='container'>
			<div class='menu'>
				<div  @click='tapMenu(1)' :class='cruIdx == 1 ? "active":""'>咖啡</div>
				<div  @click='tapMenu(2)' :class='cruIdx == 2 ? "active":""'>商品</div>
				<div  @click='tapMenu(3)' :class='cruIdx == 3 ? "active":""'>{{pageText.yhtc}}</div>
			</div>
		
			<view class='content'>
				<scroll-view class='data-list' style='height:100%' scroll-y>
					<!-- 咖啡 begin-->
					<view class='coffee-list' v-if='cruIdx == 1 || cruIdx == 2' >
						<view class='data-item'  v-for="(item,idx) in dataList" v-if="item.type == cruIdx" :key="idx" >
							<img class='data-img'  style='width:120rpx;height:120rpx;' :src='item.absoluteurl' />
							<view class='data-desc'>
								<view>{{item.name}}</view>
								<view>月售：{{item.monthSale}}</view>
								<view v-if="item.desc" style='color:#ccc'>{{item.desc}}</view>
							</view>
							<view class='data-r' >
								<view class='data-price'>￥{{item.price}}</view>
								<!-- <text class='activity'>最新活动</text> -->
							</view>
						</view>
						
					</view>
					<!-- 咖啡 end-->
					<!-- 套餐 begin -->
					<view class='set-meal' v-if='cruIdx ==3' >
						<view class='data-item' v-for="(item,idx) in makerComboMsgList" :key="idx">
								<view class='goods1 flex-item'>
									<img style='width:120rpx;height:120rpx;' :src='item.absolutecoffeepic' />
									<text class='setmeal-desc'>{{item.coffeeName}}</text>
								</view>
								<view class='plues flex-item'>
									<img style='width:50rpx;height:50rpx' src='../../../static/images/plues.png' />
									<view class='old-price'>{{pageText.yj}}：{{ item.coffeeOriginalPrice + item.goodOriginalPrice }}</view>
									<view class='new-price'>￥{{item.coffeeprice + item.goodprice}}</view>
								</view>
								<view class='goods2 flex-item'>
									<img style='width:120rpx;height:120rpx;' :src='item.absolutegoodpic' />
									<text class='setmeal-desc'>{{item.goodName}}</text>
								</view>
						</view>               
					</view>
					
					<!-- 套餐 end -->
				</scroll-view>
			</view>
		</view>
	</div>
</template>
<script>
	import {get} from '../../utils/index'
	export default{
		
		data(){
			return{
				coffeeObj:{},
				cruIdx:1,
				dataList:[],
				makerComboMsgList:[],
				pageText:{
				  'jqbh':'机器编号',
				  'jqmc':'机器名称',
				  'jqwz':'机器位置',
				  'yhtc':'优惠套餐',
				  'yj':'原价'
				}
			}
		},
		methods: {
			async getDataList() {
				var font = wx.getStorageSync('userDo').font
				var datas = {
					makerId:this.coffeeObj.id,
					font:font
				}
				this.dataList = await get('getSaleByMakerId',datas);
				
			},
			async getMakerComboMsg(){
				var font = wx.getStorageSync('userDo').font
				var datas = {
					makerId:this.coffeeObj.id,
					font:font
				}
				
				this.makerComboMsgList = await get('getMakerComboMsg/'+this.coffeeObj.id+'/'+wx.getStorageSync('userDo').font);
				console.log(this.makerComboMsgList)
			},
			tapMenu(idx){
				this.cruIdx = idx;
				if(idx == 3){
					this.getMakerComboMsg();
				}
			}
			
		},
		mounted(){
			this.coffeeObj = JSON.parse(this.$root.$mp.query.item);
			this.getDataList();
			
		}
	}
</script>

<style>
	.header{
    background: #333;
    padding: 30rpx 20rpx 0 20rpx;
    display: flex;
    height: 160rpx;
}
.header-img{
    width: 180rpx;
    height: 120rpx;
    border-radius: 10rpx;
}
.header-desc{
    font-size: 24rpx;
    color: #fff;
    padding-left: 20rpx;

}
.header-desc view{
    margin-bottom: 10rpx;
}
.container{
    position: fixed;
    display: flex;
    top: 190rpx;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 26rpx
}
.container .menu{
    width: 162rpx;
    line-height: 80rpx;
    text-align: center;
    background: #f0f0f0;
}
.container .menu .active{
    background: #fff;
    position: relative
}
.container .menu .active::after{
    display: block;
    content: '';
    position: absolute;
    height: 40rpx;
    width: 6rpx;
    background: #000;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}
.content{
    flex: 1;
    height: 100%;
    background: #fafafa;
}
.data-item{
    padding: 20rpx;
    background: #fff;
    display: flex;
    border-bottom: 2rpx solid #e4e4e4;
}
.data-item:last-child{
    border: 0;
}
.data-img{
    border-radius: 10rpx;
}
.data-desc{
    font-size: 24rpx;
    padding-left: 20rpx;
    flex: 1;
}
.data-desc view{
    margin-bottom: 10rpx;
    color: #000;
}

.data-price{
    text-align: center;
    color: red;
    font-size: 26rpx;
    margin-top: 10rpx;
}
.activity{
    font-size: 20rpx;
    color: #02bd21;
    border: 2rpx solid #02bd21;
    padding: 2rpx 4rpx;
}
.setmeal-desc{
    display: block;
    font-size: 22rpx;
    text-align: center;
    margin-top: 10rpx;
}
.flex-item{
    flex: 1;
    text-align: center;
}
.flex-item image{
    display: block;
    margin: 0 auto;
    border-radius: 10rpx;
}
.old-price{
    font-size: 22rpx;
    color: #ccc;
    margin: 15rpx 0;
}
.new-price{
    font-size: 30rpx;
    color: red;
}
</style>